<template>
  <div>
    <van-nav-bar
        title="事件详情"
        left-text="返回"
        @click-left="onClickLeft"
        left-arrow
    />

    <van-row class="backg">
      <van-col span="24" class="font-14">
        事件剩余处理时间：
        <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
      </van-col>

      <van-col span="24" class="backg-c" @click="shrink">
        <van-col span="8" class="event-img">
          <van-image
              width="100%"
              height="110"
              v-bind:src="appHkevent.eventImage"
          />
        </van-col>
        <van-col span="16" class="event-padding">
          <van-col span="24" class="font-14">
            {{ appHkevent.eventTitle }}
          </van-col>
          <van-col span="24" class="font-12">
            <van-image
                class=""
                width="10"
                height="10"
                :src="require('@/assets/img/icon-06.png')"

            />
            {{ appHkevent.eventTypeName }}
          </van-col>
          <van-col span="24" class="font-12">
            <van-image
                class=""
                width="10"
                height="10"
                :src="require('@/assets/img/icon-18.png')"
            />
            {{ appHkevent.cameraName }}
          </van-col>
          <van-col span="24" class="font-12">
            <van-image
                class=""
                width="10"
                height="10"
                :src="require('@/assets/img/icon-19.png')"
            />
            {{ appHkevent.reportTime }}
          </van-col>
        </van-col>
      </van-col>
    </van-row>

    <!--    <van-row class="backg">-->
    <!--      <van-col span="24">-->
    <!--        <van-col span="18" class="title-column">-->
    <!--          <van-image class="title-img" width="10" height="12" :src="require('@/assets/img/column-icon.png')" />-->
    <!--          待处理事件-->
    <!--        </van-col>-->

    <!--        <van-col span="6" class="workAc-text" @click="shrink">-->
    <!--          <van-image class="title-img" width="10" height="10" :src="require('@/assets/img/icon-04.png')" />-->
    <!--          <span class="font-12">{{messageS}}</span>-->
    <!--        </van-col>-->
    <!--      </van-col>-->
    <!--    </van-row>-->

    <van-row class="backg" v-show="isShow">
      <van-col span="24" class="title-column">
        <van-image
            class="title-img"
            width="10"
            height="12"
            :src="require('@/assets/img/column-icon.png')"
        />
        待处理事件详情
      </van-col>

      <van-col span="24" class="event-details-img">
        <van-image

            width="100%"
            height="200"
            v-bind:src="appHkevent.eventImage"
            v-image-preview
        />
      </van-col>

      <van-col span="24">
        <van-cell-group class="backg-c-border">
          <van-cell title="所属辖区" :value="appHkevent.regionName" />
          <van-cell title="事件地点" :value="appHkevent.cameraName" />
          <van-cell title="事件类型" :value="appHkevent.eventType" />
          <van-cell title="上报时间" :value="appHkevent.reportTime" />
        </van-cell-group>
      </van-col>

      <van-col  span="24"   v-for="(item, index) in recordList" :key="index">
        <van-cell-group class="backg-c-border" v-if="item.actionName=='QS0001'" >
<!--          <van-cell title="审核结果" :value="item.handlerContent" />-->
          <van-cell title="签收人" :value="item.handlerName" />
          <van-cell title="签收时间" :value="item.nowTime" />
        </van-cell-group>
        <van-cell-group class="backg-c-border" v-if="item.actionName=='TH0002'" >
          <!--          <van-cell title="审核结果" :value="item.handlerContent" />-->
          <van-cell title="退回人" :value="item.handlerName" />
          <van-cell title="退回时间" :value="item.nowTime" />
        </van-cell-group>
      </van-col>
    </van-row>

    <van-row class="backg bottom-mt">
<!--      <van-col span="24" class="title-column">-->
<!--        <van-image-->
<!--            class="title-img"-->
<!--            width="10"-->
<!--            height="12"-->
<!--            :src="require('@/assets/img/column-icon.png')"-->
<!--        />-->
<!--        {{ data.actionName }}-->
<!--      </van-col>-->

      <van-col span="24" class="backg-c event" style="margin-top: 20px"  v-for="(items, indexs) in recordList.slice(1)" :key="indexs">
        <!-- 已处理行动集合 -->

        <van-col span="24" >
        <van-image
            class="title-img"
            width="10"
            height="12"
            :src="require('@/assets/img/column-icon.png')"
        />
          <span style="font-size: 18px">{{ items.actionName }}</span>
        </van-col>

          <div v-for="(item, index) in items.appFieldList" :key="index">
            <van-row>
            <van-col span="5" style="padding-top: 15px" class="font-14">{{ item.fieldName }}:</van-col>
            <!--单选按钮  -->
            <van-col
                span="24"
                class="event-btn event-line"
                v-if="item.fieldType == '单选框'"

            >
              <van-button
                  disabled
                  size="small"
                  v-for="(itemas, index) in division(item.fieldContent)"
                  :key="index"
                  v-bind:class="{ active: item.fieldValue == itemas }"
              >{{ itemas }}
              </van-button>
            </van-col>
            <!-- 图片 -->
            <van-col span="24"  v-if="item.fieldType == '图片'">
              <img
                  v-image-preview3
                  :src="item.fieldValue"
                class="imgPreview"
                width="75px"
                height="75px"

              />
            </van-col>
            <!-- 备注 -->
            <van-col span="19" class="font-14"  v-if="item.fieldType == '备注'">
            <input
                readonly="readonly"
                class="Textfield"
                type="textarea"
                style="width: 100%; height: 30px; font-size: 15px;"
                rows="3"
                ref="userphone"
                :value="item.fieldValue"
            />
            </van-col>
            <!-- 单行文本 -->
            <van-col span="19" class="font-14" v-if="item.fieldType == '单行文本'">
            <input
                readonly="readonly"
                class="Textfield"
                type="text"
                style="width: 100%; height: 30px; font-size: 15px;border:none;font-weight:bold;"
                rows="3"
                ref="userphone"
                :value="item.fieldValue"
            />
            </van-col>
            <!-- 处理意见 -->
            <van-col span="19" class="font-14"  v-if="item.fieldType == '处理意见'">
            <input
                readonly="readonly"
                class="Textfield"
                type="text"
                style="width: 100%; height: 30px; font-size: 15px;border:none;font-weight:bold; "
                rows="3"
                ref="userphone"
                :value="item.fieldValue"
            />
            </van-col>

         </van-row>
          </div>
<!--  <p>&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;</p>-->
      </van-col>
      <van-col span="24" class="backg-c event"  style="margin-top: 20px" v-if="wang != 'wanceng'">
        <van-col span="24" class="title-column">
          <van-image
              class="title-img"
              width="10"
              height="12"
              :src="require('@/assets/img/column-icon.png')"
          />
          {{ data.actionName }}
        </van-col>
        <!-- 当前行动处理字段集合 -->
        <div v-for="(item, nn) in htmlas" :key="nn">

          <van-col
              span="24"
              class="font-14"
              v-if="item.fieldType != '处理意见'"
          >{{ item.fieldName }}</van-col
          >
          <!-- v-if="item.fieldType == '单选'" -->
          <van-col
              span="24"
              class="event-btn event-line"
              v-if="item.fieldType == '单选框'"
          >
            <van-button
                plain
                size="small"
                v-for="(items, index) in division(item.fieldContent)"
                :key="index"
                v-bind:class="{ active: indexId == items }"
                @click="clickStyle(items)"
            >{{ items }}
            </van-button>
          </van-col>
          <!-- v-if="item.fieldType == '图片'" -->
          <van-col span="24" v-if="item.fieldType == '图片'">
            <div class="posting-uploader">
              <div
                  class="posting-uploader-item"
                  v-for="(item, nn) in postData"
                  :key="nn"
              >
                <img
                    :src="item.content"
                    alt="图片"
                    class="imgPreview"
                    width="75px"
                    height="75px"
                />
                <van-icon name="close" @click="delImg(nn)" class="delte" />
              </div>
              <van-uploader
                  :after-read="afterRead"
                  :accept="'image/*'"
                  v-show="postData.length <= 4"
              >
              </van-uploader>
            </div>
          </van-col>
          <!-- v-if="item.fieldType == '备注'" -->
          <van-col span="24" v-if="item.fieldType == '备注'">
            <van-field
                class="Textfield"
                v-model="textareaMessage"
                rows="3"
                autosize
                type="textarea"
                maxlength="150"
                :placeholder="item.fieldContent"
                show-word-limit
            />
          </van-col>
          <!-- v-if="item.fieldType == '单行文本'" -->
          <van-col span="24" v-if="item.fieldType == '单行文本'">

            <van-field
                class="Textfield"
                v-model="textMessageList[nn]"
                rows="3"
                type="text"
                :placeholder="item.fieldContent"

            />
          </van-col>
        </div>
        <van-col span="24" v-if=" wang != 'wanceng'" >
          <van-col span="12" class="font-14 van-button--plain"
          >处理意见
          </van-col>
          <van-col span="12" class="font-12 arrow-fr">
            <van-button type="info" size="small" @click="showPopup"
            >快捷处理意见
            </van-button>
          </van-col>

          <!--选择弹出位置-->
          <van-popup
              v-model="show"
              position="bottom"
              :style="{ height: '30%' }"
          >
            <van-col
                span="24"
                class="font-14 van-button--plain"
                @click="showflasePopup('沟通协商')"
            >沟通协商
            </van-col>
            <van-col
                span="24"
                class="font-14 van-button--plain"
                @click="showflasePopup('出警整治')"
            >出警整治
            </van-col>
            <van-col
                span="24"
                class="font-14 van-button--plain"
                @click="showflasePopup('派人维护')"
            >派人维护
            </van-col>
            <van-col
                span="24"
                class="font-14 van-button--plain"
                @click="showflasePopup('电话通知')"
            >电话通知
            </van-col>
          </van-popup>

          <van-col span="24">
            <van-field
                class="Textfield"
                v-model="message"
                rows="3"
                autosize
                type="textarea"
                maxlength="150"
                placeholder="请填写事件处理结果"
                show-word-limit
            />
          </van-col>
          <van-col span="24">
            <!--<router-link to="/Remind">-->
            <van-button
                class="van-button--plain"
                type="info"
                block
                @click="onSubmit"
            >提交
            </van-button>

            <!--</router-link>-->
          </van-col>
        </van-col>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {

  data() {
    return {
      time: 30 * 60 * 60 * 1000,
      message: "",
      backMessage: "",
      textMessageLists:'',
      textMessageList: [],
      show: false,
      indexs:0,
      images:[],
      backShow: false,
      actionJson: [],
      appHkevent: "",
      recordList: [],
      indexId: "未整改",
      postData: [],
      textareaMessage: "",
      textMessage: "",
      isShow: "",
      wang:0,
      htmlas: [],
      actionName: "",
      data: "",
      send: false,
      sendText: "",
      Intdex: 0,
      list: [],
    };
  },
  created() {
    if (this.$route.query.Intdex != null)
      this.Intdex = this.$route.query.Intdex;
       this.wang = this.$route.query.wang;
       console.log("textMessageList");
       console.log(this.textMessageList)
    this.exhibition();
  },
  methods: {
    onChange(index){
      this.index = index;
    },
    shrink() {
      this.isShow = !this.isShow;
    },
    delImg(index) {
      // 删除指定下标的图片对象
      if (isNaN(index) || index >= this.postData.length) {
        return false;
      }
      let tmp = [];
      for (let i = 0, len = this.postData.length; i < len; i++) {
        if (this.postData[i] !== this.postData[index]) {
          tmp.push(this.postData[i]);
        }
      }
      this.postData = tmp;
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file);
      // console.log(file.file);
      this.postData.push(file); // postData是一个数组
    },
    onClickLeft() {
      this.$router.push("/Remind");
    },
    showPopup() {
      this.show = true;
    },
    showSend() {
      this.send = true;
    },
    showflasePopup(opinion) {
      this.message = opinion;
      this.show = false;
    },
    back() {
      this.backShow = true;
    },
    clickStyle(Iid) {
      this.indexId = Iid;
    },
    split(value) {
      var spa = value.split(",");
      return spa;
    },
    //事件提交
    onSubmit() {
      var userId = localStorage.getItem("userId");
      var eventId = this.$route.query.eventId;
      console.log("handlerUserId => ", userId);
      console.log("eventId => ", eventId);
      console.log("actionName => ", this.data.actionName);
      console.log("commonlyId => ", this.data.commonlyId);
      console.log("handlerContent=>", this.indexId);

      var appFields = [];
      for (let i = 0, len = this.htmlas.length; i < len; i++) {
        var type = "";
        var Content = "";
        if (this.htmlas[i].fieldType == "单行文本") {
          type = "单行文本";
         Content=this.textMessageList[i];
         console.log(Content);

        } else if (this.htmlas[i].fieldType == "备注") {
          type = "备注";
          Content = this.textareaMessage;
        } else if (this.htmlas[i].fieldType == "图片") {
          type = "图片";
          for (let i = 0, len = this.postData.length; i < len; i++) {
            let imgbase64 = this.postData[i].content.replace(
                /^data:image\/\w+;base64,/,
                ""
            );
            if (i != 0) {
              Content += ",";
            }
            Content += imgbase64;
          }
        } else if (this.htmlas[i].fieldType == "单选框") {
          type = "单选框";
          Content = this.indexId;
        }
        var field = {
          fieldEnglishName: this.htmlas[i].fieldEnglishName,
          fieldName: this.htmlas[i].fieldName,
          fieldType: type,
          fieldContent: this.htmlas[i].fieldContent,
          fieldSort: this.htmlas[i].fieldSort,
          fieldValue: Content,
        };
        appFields.push(field);
      }

      var handlingOpinions = {
        fieldContent: this.message,
        fieldEnglishName: null,
        fieldName: "处理意见",
        fieldType: "处理意见",
        fieldValue: this.message,
        fieldSort: 5,
      };
      appFields.push(handlingOpinions);
      var info = {
        handlerUserId: userId,
        eventId: eventId,
        actionName: this.data.actionName,
        commonlyId: this.data.commonlyId,
        handlerContent: this.indexId,
        appField: appFields,
      };
      Toast.loading({
        message: '事件反馈中',
        forbidClick: true,
      });
      this.$http
          .post("http://139.224.226.216:8083/appEventDetali/addField", info)
          .then((res) => {
            console.log(res);
            if (res.data.code == 0) {
              if (res.data.msg == "添加成功") {
                this.$http
                    .post("http://139.224.226.216:8083/hkapi/eventFeedback?evenid="+eventId)
                    .then((res) => {
                       console.log(res)
                          if (res.data.code=="0"){
                            Toast.success('事件反馈成功');
                            this.$router.push("/Remind");
                          }else{
                            Toast.fail('事件反馈失败');
                          }
                    })
              } else {
                Toast(res.data.msg);
              }
            } else {
              Toast.fail("事件反馈失败！");
            }
          })
          .catch((err) => {
            Toast("网络错误" + err);
          });
    },
    division(strings) {
      var chars = strings.split(",");
      return chars;
    },
    //事件退回
    beforeClose(action) {
      if (action === "confirm") {
        var userId = localStorage.getItem("userId");
        var eventId = this.$route.query.eventId;
        var eventType = this.appHkevent.eventType;
        var info = {
          handlerUserId: userId,
          eventId: eventId,
          eventType: eventType,
          handlerContent: this.message,
        };
        this.$http
            .post("http://139.224.226.216:8083/appEventDetali/returnEventInfo", info)
            .then((res) => {
              console.log(res);
              if (res.data.code == 500) {
                Toast("事件退回失败");
              } else if (res.data.code == 0) {
                Toast("事件退回成功");
                this.$router.replace("/Remind");
              } else {
                Toast("非法操作！");
              }
            })
            .catch((err) => {
              Toast("网络错误" + err);
            });
      } else if (action === "cancel") {
        this.$router.go(0);
      }
    },
    //数据加载
    exhibition: function () {
      var userId = localStorage.getItem("userId");
      var eventId = this.$route.query.eventId;
      console.log(userId);
      console.log(eventId);
      this.$http
          .post(
              "http://139.224.226.216:8083/appEventDetali/appNowEventDetali?userId=" +
              userId +
              "&eventId=" +
              eventId
          )
          .then((res) => {
            console.log("事件详情res数据");
            console.log(res);
            console.log(res.data);
            console.log(res.data.data);
            if (res.data.code == 0 && res.data.data != null) {
              console.log(res.data.data.appHkevent);
              console.log(res.data.data.recordList);
              if (this.Intdex == 0) {
                this.appHkevent = res.data.data.appHkevent;
                this.recordList = res.data.data.recordList;
                this.htmlas = res.data.data.appNowFieldList;
                console.log("集合");
                console.log(this.appHkevent);

                this.data = res.data.data;
                this.time = res.data.data.appHkevent.pengTime * 1000;
              } else {
                this.appHkevent = res.data.data.data.appHkevent;
                this.recordList = res.data.data.data.recordList;
                console.log("集合");
                console.log(this.recordList);
                this.htmlas = res.data.data.data.appNowFieldList;
                this.data = res.data.data.data;
                this.time = res.data.data.data.appHkevent.pengTime * 1000;
              }
            }
          })
          .catch((err) => {
            Toast("网络错误" + err);
            console.log(err);
          });
    },


  },

};


</script>

<style scoped>
</style>